<template>
  <div id="commodity" class="container_wrap">
    <van-tabs>
      <van-tab v-for="(item, index) in comlist" :key="index">
        <template #title>
          <div @click="changeImg(index)" class="tab-item">
            <img
              :src="item.normalImg"
              class="icon-img"
              v-show="activeImg != index"
            />
            <img
              :src="item.activeImg"
              class="icon-img"
              v-show="activeImg == index"
            />
            {{ item.title }}
          </div>
        </template>
        <div
          class="com-item"
          v-for="(citem, cindex) in item.com_inner"
          :key="cindex"
        >
          <router-link to="detail">
            <div class="com-img">
              <img v-lazy="citem.com_img" />
            </div>
          </router-link>
          <div class="com-desc">
            <p class="msg">{{ citem.com_title }}</p>
            <p class="tips">{{ citem.com_tips }}</p>
            <p class="price">
              <span class="red-pri fl">¥{{ citem.com_red }}起</span>
              <span class="through fl">¥{{ citem.com_through }}</span>
              <span class="sell fr">已售 {{ citem.com_sell }}</span>
            </p>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comlist: [],
      activeImg: "",
    };
  },
  mounted() {
    this.$axios.get("../../../static/json/commodity.json").then((res) => {
      this.comlist = res.data.com_list;
    });
  },
  methods: {
    changeImg(index) {
      this.activeImg = index;
    },
  },
};
</script>

<style lang="less">
#commodity {
  .tab-item:first-child {
    padding-left: 0;
  }
  .icon-img {
    width: 0.5rem;
    height: 0.5rem;
    position: relative;
    top: 0.14rem;
    left: 0.1rem;
  }
  .van-tabs__nav--complete {
    padding-left: 0px;
  }
  .van-tabs__line {
    z-index: 0;
    background-color: unset;
  }
  .com-item {
    background: #fff;
    height: 48%;
    width: 3.2rem;
    display: inline-block;
    margin-left: 0.18rem;
    margin-top: 0.18rem;
    .com-img {
      width: 100%;
      position: relative;
      img {
        width: 100%;
        border-radius: 0.1rem;
      }
    }
    .com-desc {
      font-size: 0.28rem;
      .msg {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      p {
        margin: 0;
      }
      .tips {
        color: rgb(192, 190, 190);
        font-size: 0.26rem;
        margin-top: 0.16rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .price {
        margin-top: 0.1rem;
        color: rgb(192, 190, 190);
        font-size: 0.26rem;
        overflow: hidden;
        .fl {
          float: left;
        }
        .fr {
          float: right;
        }
        .red-pri {
          color: #fb725d;
        }
        .through {
          text-decoration: line-through;
          padding-top: 0.04rem;
          margin-left: 0.08rem;
        }
      }
    }
  }
}
</style>